<template>
  <a-modal
    :title="'实时人群包使用说明'"
    :visible="true"
    width="60%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-tabs
        default-active-key="A"
        :tab-position="mode"
        @prevClick="callback"
        @nextClick="callback"
        v-model="menu"
        :style="{ height: '47px'}"
      >
        <a-tab-pane
          key="A"
          tab="生日营销场景"
        >
        </a-tab-pane>
        <a-tab-pane
          key="B"
          tab="0转1营销场景"
        >
        </a-tab-pane>
        <a-tab-pane
          key="C"
          tab="首单消费二回营销场景"
        >
        </a-tab-pane>
        <a-tab-pane
          key="D"
          tab="入会周年营销场景"
        >
        </a-tab-pane>
        <a-tab-pane
          key="E"
          tab="月度加V任务"
        >
        </a-tab-pane>
        <a-tab-pane
          key="F"
          tab="线上新关注会员引导加V"
        >
        </a-tab-pane>
        <a-tab-pane
          key="G"
          tab="线上已开卡会员引导加V"
        >
        </a-tab-pane>
        <a-tab-pane
          key="H"
          tab="【临时】会员部11月活动"
        >
        </a-tab-pane>
      </a-tabs>
      <a-card v-if="menu == 'A'">
        <span><span style="font-size:18px">案例</span><br>8月1日给8月份生日，JNBY品牌下的金卡和白金卡会员发送生日福利通知。仅限天目里店开卡时间大于30天的会员。在15天后再给领取了但没有核销的会员再次通知。</span>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">生日营销人群包</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              <span style="color:#409eff;">JNBY</span>品牌下所属门店为<span style="color:#409eff;">天目里店</span>的<br>且 开卡时间大于<span style="color:#409eff;">1</span>天的金卡会员<br>且 生日月为当月
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">生日营销人群包配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">品牌:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >JNBY</a-col>
                <a-col :span="3">门店:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >天目里店</a-col>
              </a-row>
              <a-row style="margin-top:10px">
                <a-col :span="3">类型:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >成人</a-col>
                <a-col :span="3">会员等级:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >金卡</a-col>
              </a-row>
            </div>
          </div>
        </a-card>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">生日营销人群包未核销人群包</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              <span style="color:#409eff;">JNBY</span>品牌下所属门店为<span style="color:#409eff;">天目里店</span>的<br>且 开卡时间大于<span style="color:#409eff;">1</span>天的<span style="color:#409eff;">金卡</span>会员<br>且 未核销<span style="color:#409eff;">1234（awardID)</span>券的会员<br>且 生日月为当月
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">生日营销人群包配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">品牌:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >JNBY</a-col>
                <a-col :span="3">门店:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >天目里店</a-col>
              </a-row>
              <a-row style="margin-top:10px">
                <a-col :span="3">类型:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >成人</a-col>
                <a-col :span="3">会员等级:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >金卡</a-col>
              </a-row>
              <a-row style="margin-top:10px">
                <a-col :span="3">券ID:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >1234（awardID)</a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-card>
      <a-card v-if="menu == 'B'">
        <span><span style="font-size:18px">案例</span><br>每天为前一日开卡但是没有消费的会员发送一张新人礼券。并在3天后给未核销券的会员发送提醒消息。</span>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">0转1人群</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              前一日<span style="color:#409eff;">JNBY</span>品牌下开卡且未消费的会员
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">0转1人群配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">品牌:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >JNBY</a-col>
              </a-row>
            </div>
          </div>
        </a-card>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">0转1人群未核销</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              拥有<span style="color:#409eff;">1234（awardID)</span>券<br>且 券发放时间等于<span style="color:#409eff;">3</span>天<br>且 未核销的会员<br><br>注： 券只能在当前场景发放
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">0转1人群未核销配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">券ID:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >1234（awardID)</a-col>
                <a-col :span="3">券发放天数:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >3</a-col>
              </a-row>

            </div>
          </div>
        </a-card>
      </a-card>
      <a-card v-if="menu == 'C'">
        <span><span style="font-size:18px">案例</span><br>会员首单消费后，120天未再次消费。需要给会员发券刺激二次回购。并在一段时间后提醒会员核销券。</span>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">首消未复购人群</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              <span style="color:#409eff;">JNBY</span>品牌下首次消费间隔时间等于<span style="color:#409eff;">120</span>天<br>
              且 未再次消费的会员
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">首消未复购人群配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">品牌:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >JNBY</a-col>
                <a-col :span="6">首消后间隔的未消费时间:</a-col>
                <a-col
                  :span="6"
                  style="color:#409eff;"
                >120</a-col>
              </a-row>
            </div>
          </div>
        </a-card>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">首消未复购未核销人群</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              拥有<span style="color:#409eff;">1234（awardID)</span>和<span style="color:#409eff;">1234（awardID)</span>券<br>且 券发放时间等于<span style="color:#409eff;">10</span>天<br>且 未核销的会员<br>且 未核销以上任一券的会员<br><br>注： 券只能在当前场景发放
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">首消未复购未核销人群配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">券ID:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >1234（awardID),1234（awardID)</a-col>
                <a-col :span="3">券发放天数:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >10</a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-card>
      <a-card v-if="menu == 'D'">
        <span><span style="font-size:18px">案例</span><br>每月为入会周年的会员发放礼包，并在若干天后提醒会员使用。</span>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">入会周年人群</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              <span style="color:#409eff;">JNBY</span>品牌下当前月为入会周年月<br>且 是<span style="color:#409eff;">金卡</span>的会员
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">入会周年人群配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">品牌:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >JNBY</a-col>
                <a-col :span="3">会员等级:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >金卡</a-col>
              </a-row>
            </div>
          </div>
        </a-card>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">入会周年未核销人群</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              <span style="color:#409eff;">JNBY</span>品牌下当前月为入会周年月<br>且 是<span style="color:#409eff;">金卡</span>的会员<br>且 未核销<span style="color:#409eff;">1234（awardID)</span>券的会员
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">入会周年未核销人群配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">品牌:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >JNBY</a-col>
                <a-col :span="3">会员等级:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >金卡</a-col>
              </a-row>
              <a-row style="margin-top:10px">
                <a-col :span="3">券ID:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >1234（awardID)</a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-card>
      <a-card v-if="menu == 'E'">
        <span><span style="font-size:18px">案例</span><br>每月为导购推送添加了专属导购但是没有加导购企微的会员。</span>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">月度加V任务</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              <span style="color:#409eff;">JNBY</span>品牌 <span style="color:#409eff;">天目里门店</span>上个月绑定了专属导购的会员<br>且 没有加专属导购企微微信的会员
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">月度加V任务配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">品牌:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >JNBY</a-col>
                <a-col :span="3">门店:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >天目里门店</a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-card>
      <a-card v-if="menu == 'F'">
        <span><span style="font-size:18px">案例</span><br>暂无</span>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">线上新关注会员引导加V</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              关注<span style="color:#409eff;">JNBY</span>品牌公众号的会员<br>且<span style="color:#409eff;">JNBY</span>品牌下没有专属导购 <br>且关注公众号时间≥<span style="color:#409eff;">24</span>小时，＜<span style="color:#409eff;">100</span>小时<br>且未添加手机号为<span style="color:#409eff;">150****8840或150****9950</span>的<br>江南布衣员工企微<br>且未进入过<span style="color:#409eff;">jnbygroup.com</span>页面
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">线上新关注会员引导加V配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">品牌:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >JNBY</a-col>
                <a-col :span="5">关注公众号时间:</a-col>
                <a-col
                  :span="7"
                  style="color:#409eff;"
                >≥24小时，＜100小时</a-col>
              </a-row>
              <a-row>
                <a-col :span="3">页面路径:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >jnbygroup.com</a-col>
                <a-col :span="5">中心化运营企微配置:</a-col>
                <a-col
                  :span="7"
                  style="color:#409eff;"
                >150****8840，150****9950</a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-card>
      <a-card v-if="menu == 'G'">
        <span><span style="font-size:18px">案例</span><br>暂无</span>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">线上已开卡会员引导加V</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              进入过<span style="color:#409eff;">jnbygroup.com</span>页面<br>且<span style="color:#409eff;">JNBY</span>品牌下没有专属导购<br>且进入页面时间≥<span style="color:#409eff;">24</span>小时，＜<span style="color:#409eff;">100</span>小时<br>且未添加手机号为<span style="color:#409eff;">150****8840或150****9950</span>的<br>江南布衣员工企微
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">线上已开卡会员引导加V配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">品牌:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >JNBY</a-col>
                <a-col :span="5">进入页面时间:</a-col>
                <a-col
                  :span="7"
                  style="color:#409eff;"
                >≥24小时，＜100小时</a-col>
              </a-row>
              <a-row>
                <a-col :span="3">页面路径:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >jnbygroup.com</a-col>
                <a-col :span="5">中心化运营企微配置:</a-col>
                <a-col
                  :span="7"
                  style="color:#409eff;"
                >150****8840，150****9950</a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-card>
      <a-card v-if="menu == 'H'">
        <span><span style="font-size:18px">案例</span><br>暂无</span>
        <a-card style="background: #f5f5f5;margin-top:20px">
          <div>
            <p style="font-size:16px;margin-left: 20px;">【临时】会员部11月活动</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;line-height: 25px;">
              品牌为<span style="color:#409eff;">JNBY</span>的<span style="color:#409eff;">直营正价门店</span>首次消费会员<br>单笔支付实际金额【<span style="color:#409eff;">≥1000,＜2000</span>】<br>消费时间=<span style="color:#409eff;">3</span>天<br>且消费渠道为线下
            </div>
          </div>
          <div style="margin-top:10px">
            <p style="font-size:16px;margin-left: 20px;">【临时】会员部11月活动配置</p>
            <div style="background: #fff;padding: 20px;border-radius: 10px;">
              <a-row>
                <a-col :span="3">品牌:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >JNBY</a-col>
                <a-col :span="3">服务区部:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >公司</a-col>
              </a-row>
              <a-row>
                <a-col :span="3">店铺管理模式:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >直营</a-col>
                <a-col :span="3">消费金额:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >大于等于1000 ，小于2000</a-col>
              </a-row>
              <a-row>
                <a-col :span="3">间隔天数:</a-col>
                <a-col
                  :span="9"
                  style="color:#409eff;"
                >3</a-col>

              </a-row>
            </div>
          </div>
        </a-card>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      menu: 'A',
      mode: 'top'
    }
  },

  beforeCreate() {},

  created() {},
  mounted() {},
  methods: {
    reset() {
      this.$emit('closeExplain')
    },
    callback(val) {
      console.log(val)
    }
  }
}
</script>

